<template>
  <div>
    <h1>最外层组件</h1>
    <SuNan :msg="msg" :arr="arr"></SuNan>
    <XuYing></XuYing>
  </div>
</template>

<script>
import SuNan from "./components/sunan";
import XuYing from "./components/xuying";
export default {
  name: "",
  props: [""],
  data() {
    return {
      msg: "两位美女都很漂亮！！！",
      arr: [
        { name: "sunan", age: 18 },
        { name: "xuying", age: 17 },
      ],
    };
  },
  /* 写组件  引入组件 注册组件 调用组件 */
  components: {
    SuNan,
    XuYing,
  },
  beforeCreate() {
    console.log("beforeCreate 父组件");
  },
  created() {
    console.log("created 父组件");
  },
  beforeMount() {
    console.log("beforeMount 父组件");
  },
  mounted() {
    console.log("mounted 父");
  },
  beforeUpdate() {
    console.log("beforeUpdate 父");
  },
  updated() {
    console.log("updated 父");
  },
  beforeDestroy() {
    console.log("beforeDestory 父");
  },
  destroyed() {
    console.log("destroyed 父");
  },
};

/* 
父子组件的生命周期加载顺序

父组件的beforeCreate →父组件的created →父组件的beforeMount  → 子组件beforeCreate →子组件的created→子组件的beforeMount → 子组件的mounted  → 父组件的mounted 




beforeCreate 
created
beforeMount
Mounted
beforeUpdate
updated
beforedestory
destoryed

模块化
  js文件  js文件中的数据私有 可以复用
组件化
  html+css+js  具有特定功能和效果的代码块 能复用 
工程开发
  企业级的组件化开发就是工程化


*/
</script>
<style scoped>
</style>
